<template>
    <div class="device-menu-open" v-if="!show" @click="show = !show">
        <div class="title-font">{{ $t('components.device.60zds44pfcg0') }}</div>
    </div>
    <div class="device-menu" v-else>
        <div class="title">
            <div class="title-font">{{ $t('components.device.60zds44pfcg0') }}</div>
            <div class="delete"><icon-close @click="show = !show" /></div>
        </div>
        <div class="info wrap">
            <!-- <div class="status">
                <div class="device-status">
                    <div class="online">
                        <div class="color"></div>
                        <div class="name">{{ $t('components.device.60zds44pgyk0') }}</div>
                    </div>
                    <div class="offline">
                        <div class="color"></div>
                        <div class="name">{{ $t('components.device.60zds44ph8k0') }}</div>
                    </div>
                    <div class="threat">
                        <div class="color"></div>
                        <div class="name">{{ $t('components.device.60zds44phd80') }}</div>
                    </div>
                </div>
            </div> -->
            <div class="device-signal-title">
                <div class="name">{{ $t('components.device.63cwntgfi4o0') }}</div>
                <div class="status">{{ $t('components.device.63cwntgfij80') }}</div>
                <div class="operate">{{ $t('components.device.63cwntgfils0') }}</div>
            </div>
            <div class="device-signal-scroll" v-resize="resize">
                <!-- <a-list>
                    <div class="signal" v-for="(item, index) in (list as any)" :key="index">
                        <div class="name">
                            <img src="@/assets/images/offline.png" v-if="item.status === 0">
                            <img src="@/assets/images/online.png" v-else>
                        </div>
                        <a-popover
                            :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                            <div class="content text-ellipsis">
                                <span class="content1" v-if="item.status === 0">{{ item.address }}{{ item.id }}</span>
                                <span class="content2" v-else-if="item.status === 3">{{ item.address }}{{ item.id }}</span>
                                <span class="content3" v-else>{{ item.address }}{{ item.id }}</span>
                            </div>
                            <template #content>
                                <div class="operate-demo">
                                    <p style="color: #fff;"><span>{{ item.address }}</span></p>
                                </div>
                            </template>
</a-popover>
<div class="status">
    <span v-if="item.status === 0" style="color: #B5B5B5;">{{
        $t('components.device.63cwntgfin40') }}</span>
    <span v-else-if="item.status === 3" style="color: #FF0A0A;">{{
        $t('components.device.63cwntgfipc0') }}</span>
    <span v-else style="color:#24BDFF ;">{{ $t('components.device.63cwntgfiqw0') }}</span>
</div>
<div class="operate" @click="scanPanTo(item.point, item.radius, item.status, item.id)"
    :class="`${formDevice.active == item.id ? 'operate-active' : ''}`">
    {{ $t('components.device.63cwntgfis80') }}
</div>
</div>
</a-list> -->
                <a-list v-if="list.length" :scrollbar="true" :max-height="height" :bordered="false" :split="false"
                    @reach-bottom="load">
                    <a-list-item style="padding: 0;" v-for="(item, index) in (list as any)" :key="index">
                        <div class="signal">
                            <div class="name">
                                <img src="@/assets/images/offline.png" v-if="item.status === 0">
                                <img src="@/assets/images/reserve1-active.png" v-else>
                            </div>
                            <a-popover
                                :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                                <div class="content text-ellipsis">
                                    <span class="content1" v-if="item.status === 0">{{ item.address }}</span>
                                    <span class="content2" v-else-if="item.status === 3">{{ item.address }}</span>
                                    <span class="content3" v-else>{{ item.address }}</span>
                                </div>
                                <template #content>
                                    <div class="operate-demo">
                                        <p style="color: #fff;"><span>{{ item.address }}</span></p>
                                    </div>
                                </template>
                            </a-popover>
                            <div class="status">
                                <span v-if="item.status === 0" style="color: #B5B5B5;">{{
                                    $t('components.device.63cwntgfin40') }}</span>
                                <span v-else-if="item.status === 3" style="color: #FF0A0A;">{{
                                    $t('components.device.63cwntgfipc0')
                                    }}</span>
                                <span v-else style="color:#24BDFF ;">{{ $t('components.device.63cwntgfiqw0') }}</span>
                            </div>
                            <div class="operate" @click="scanPanTo(item.point, item.radius, item.status, item.id)"
                                :class="`${formDevice.active == item.id ? 'operate-active' : ''}`">
                                {{ $t('components.device.63cwntgfis80') }}
                            </div>
                        </div>
                    </a-list-item>
                </a-list>
                <!-- <div class="signal" v-for="(item, index) in (list as any)" :key="index">
                    <div class="name">
                        <img src="@/assets/images/offline.png" v-if="item.status === 0">
                        <img src="@/assets/images/reserve1-active.png" v-else>
                    </div>
                    <a-popover
                        :arrow-style="{ border: '1px solid rgba(46, 116, 255, 0.8)', borderTop: 'unset !important', borderLeft: 'unset !important' }">
                        <div class="content text-ellipsis">
                            <span class="content1" v-if="item.status === 0">{{ item.address }}</span>
                            <span class="content2" v-else-if="item.status === 3">{{ item.address }}</span>
                            <span class="content3" v-else>{{ item.address }}</span>
                        </div>
                        <template #content>
                            <div class="operate-demo">
                                <p style="color: #fff;"><span>{{ item.address }}</span></p>
                            </div>
                        </template>
                    </a-popover>
                    <div class="status">
                        <span v-if="item.status === 0"
                            style="color: #B5B5B5;">{{ $t('components.device.63cwntgfin40') }}</span>
                        <span v-else-if="item.status === 3"
                            style="color: #FF0A0A;">{{ $t('components.device.63cwntgfipc0') }}</span>
                        <span v-else style="color:#24BDFF ;">{{ $t('components.device.63cwntgfiqw0') }}</span>
                    </div>
                    <div class="operate" @click="scanPanTo(item.point, item.radius, item.status, item.id)"
                        :class="`${formDevice.active == item.id ? 'operate-active' : ''}`">
                        {{ $t('components.device.63cwntgfis80') }}
                    </div>
                </div> -->
                <cIndexNone v-if="!list.length"></cIndexNone>
            </div>
        </div>
    </div>
</template>
<script lang='ts' setup>
import { defineModel } from 'vue'
const show = ref(true)
const emit = defineEmits(['scanPanTo', 'load'])
const height = ref(0)
//设备列表（父传子：接收）
const formDevice = reactive({
    active: null,
} as any)
const list = defineModel('list', { default: [] as any })
// console.log(list)
const scanPanTo = (point: any, radius: any, status: any, id: any) => {
    let arr = point.split(',')
    emit('scanPanTo', arr.map((item: any) => Number(item)), radius, status, id)
    formDevice.active = id
}
const load = () => {
    // emit('load')
}
const resize = (e: any) => {
    height.value = e.height
}
useWatch(list, (val: any) => {
    if (val) {
        formDevice.active = list?.value[0]?.id
    } else {
        formDevice.active = null
    }
})
const showDevice = (id: any) => {
    // console.log('设备',id)
    formDevice.active = id
}
// const getDeviceList = () => {
//     console.log('1')
// }

defineExpose({
    showDevice
})
</script>
<style scoped lang="less">
.device-menu-open {
    width: 160px;
    height: 60px;
    background-image: url('@/assets/images/hidden-wanzhou.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border-radius: 2px;
    border: 1px solid rgba(46, 116, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;

    .title-font {
        font-family: YouSheBiaoTiHei;
        opacity: 1;
        /** 文本1 */
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 0.48px;
        line-height: 24px;
        vertical-align: middle;
        background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}

.device-menu {
    // height: 385px;
    width: 290px;
    // margin: 20px;
    color: #fff;

    .title {
        width: 100%;
        height: 59px;
        background-image: url('@/assets/images/index-menue-title.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;

        .title-font {
            margin-left: 10px;
            font-family: YouSheBiaoTiHei;
            opacity: 1;
            /** 文本1 */
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 0.48px;
            line-height: 24px;
            vertical-align: middle;
            background-image: -webkit-linear-gradient(bottom, rgb(153 218 252), #ffffff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }



        .delete {
            width: 35px;
            cursor: pointer;
            font-weight: 600;
            color: rgba(75, 127, 239, 1);
        }
    }

    >.info {
        border: 1px solid rgba(46, 116, 255, 0.8);
        background: rgba(15, 19, 41, 0.85);
        height: 360px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        overflow: hidden;

        >.status {
            display: flex;
            align-items: center;
            justify-content: right;
            width: 100%;

            >.device-status {
                width: 50%;
                height: 40px;
                margin-right: 20px;
                display: flex;
                align-items: center;
                justify-content: space-around;

                >div {
                    display: flex;
                    align-items: center;
                }

                >.online {
                    >.color {
                        background: rgba(36, 189, 255, 1);
                        transform: rotate(-45deg);
                    }
                }

                >.offline {
                    >.color {
                        background: rgba(181, 181, 181, 1);
                        transform: rotate(-45deg);
                    }
                }

                >.threat {
                    >.color {
                        background: rgba(255, 20, 20, 1);
                        transform: rotate(-45deg);
                    }
                }

                .color {
                    width: 5px;
                    height: 5px;
                    transform: rotate(90deg);
                    margin-right: 6px;
                }
            }
        }

        >.device-signal-title {
            border: 1px solid rgba(46, 116, 255, 0.8);
            border-radius: 2px;
            display: flex;
            justify-content: space-between;
            padding: 5px;

            .name {
                width: 124px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 12px;
            }

            .status {
                width: 60px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .operate {
                width: 60px;
                display: flex;
                font-size: 12px;
                align-items: center;
                justify-content: center;

            }
        }

        >.device-signal-scroll {
            flex: 1;
            // overflow: auto;
            overflow: hidden;
            border: 1px solid rgba(46, 116, 255, 0.8);

            .signal {
                flex: 1;
                overflow: auto;
                display: flex;
                justify-content: space-between;
                padding: 10.5px 4px 5px 1.5px;
                align-items: center;
                font-size: 12px;

                .name {
                    width: 20px;
                    display: flex;
                    justify-content: left;
                    margin-left: 8px;

                    >img {
                        width: 8px;
                    }
                }

                .content {
                    width: 124px;
                    font-size: 12px;
                    text-align: left;
                }

                .content1 {
                    color: #B5B5B5;
                }

                .content2 {
                    color: #FF0A0A;
                }

                .content3 {
                    color: #fff;
                }

                .status {
                    width: 60px;
                    // display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .operate {
                    width: 60px;
                    color: #B5B5B5;
                    border: 1px solid #B5B5B5;
                    border-radius: 3px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 2px;
                }

                .operate-active {
                    color: #24BDFF;
                    border: 1px solid #24BDFF;
                }

                .text-ellipsis {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }

        .device-signal:after {
            // 使用伪类元素占据单位，不影响页面
            content: "";
            height: 0;
            width: 32%;
        }
    }
}

.pagination {
    display: flex;
    justify-content: flex-end;
    padding: 2px;

    :deep(.arco-pagination-jumper) {
        .arco-input-wrapper {
            background: rgba(36, 41, 68, 1);
            color: #ffffff;
        }

        .arco-pagination-jumper-separator {
            color: #ffffff;
        }

        .arco-pagination-jumper-total-page {
            color: #ffffff;
        }

    }
}
</style>